<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo06</title>
  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/browser.js"></script>
  <style>
    .wrap {
      border: 1px solid #ccc;
      padding: 5px;
    }
    .wrap .header {
      background: #f5f5f5;
    }
    .wrap .content {
      background: #d56045;
    }
  </style>
</head>
<body>
<div id="root"></div> 
<!-- 
React component 可以是一个函数，返回一个 React element

* 传递参数可以是 React element
 -->
<script type="text/babel">

function Header(props){
  return <h1>{props.name}</h1>;
}
function Content(props){
  return (
    <ul>
     { props.names.map( name => <li key={name}>{name}</li> )  }
    </ul>     
  )  
}

function App(props) {
  return (
    <div className="wrap">
     <div className="header">
       {props.header}
     </div>
     <div className="content">
       {props.content}
     </div>
    </div>
  )
}
const header = <Header name="test" />;
const fruits = ['apple', 'banana', 'cherry', 'durian'];
const content = <Content names={fruits} />
ReactDOM.render(
  <App header={header} content={content} />,
  document.getElementById('root')
);
</script>
</body>
</html>